<template>
    <view class="container">
        <intake-nav-bar title="立即认证" dark :fixed="true" />
        <!-- 进度条 -->
        <view class="progress">
            <view class="progress-item active">
                <view class="progress-dot active">
                    <view class="progress-dot-min"></view>
                </view>
                <text class="progress-text">个人信息</text>
            </view>
            <view class="progress-item">
                <view class="progress-dot active">
                    <view class="progress-dot-min"></view>
                </view>
                <text class="progress-text">添加银行</text>
            </view>
            <view class="progress-item">
                <view class="progress-dot">
                    <view class="progress-dot-min"></view>
                </view>
                <text class="progress-text">完成认证</text>
            </view>
            <view class="progress-line">
            </view>
            <view class="progress-line-active"></view>
        </view>

        <!-- 表单区域 -->
        <view class="form-container">
            <view class="form-tip">输入卡号添加</view>
            <view class="form-container-main">
                <view class="form-group">
                    <input class="form-input" v-model="number" type="text" placeholder="卡号" />
                    <uni-icons class="camera-icon" type="camera-filled" size="28" color="#0066FF" @click="scanCode" />
                </view>

                <view class="form-group">
                    <input class="form-input" v-model="name" type="text" placeholder="持卡人姓名" />
                </view>

                <!-- <view class="form-group">
                    <input class="form-input" v-model="phone" type="text" placeholder="持卡人手机号" />
                </view> -->
                <view class="form-group">
                    <input class="form-input" v-model="cardName" type="text" placeholder="开户行"
                        @click="toggle('bottom')" />
                </view>

            </view>
        </view>
        <uni-popup ref="popup" background-color="#fff">
            <view class="popup-content">
                <view class="bank-title">选择银行</view>
                <view class="content">
                    <view class="list" v-for="(item, index) in bankList">
                        <image :src="item.icon"></image>
                        {{ item.name }}
                        <view class="btn" @click="changeCard(item)">添加</view>
                    </view>
                </view>
            </view>
        </uni-popup>
        <!-- 底部按钮 -->
        <button class="submit-btn" @click="next()">下一步</button>
    </view>
</template>

<script>
import { saveCardInfo, getAllBankList } from "@/api/user/userScore";
export default {
    data() {
        return {
            number: '',//银行卡号
            id_card: '',//身份证号
            name: '',//姓名
            bank_id: '',//银行id
            id_card_pic: '',//证件地址
            bankList: [],
            cardName: '',
            step1Data: {}
        };
    },
    onLoad(query) {
        this.step1Data = query
        this.queryBankList()
    },
    methods: {
        changeCard(e) {
            this.bank_id = e.id
            this.cardName = e.name
            this.$refs.popup.close()
        },
        queryBankList() {
            getAllBankList().then(res => {
                this.bankList = res.data
            })
        },
        scanCode() {
            uni.scanCode({
                success: (res) => {
                    const barcode = res.result.split("?n=")[1];
                    // 将扫描到的条形码赋值给页面的某个变量
                    this.number = barcode;
                    // 你可以在这里处理扫描到的条形码数据，比如显示在页面上或者发送到服务器
                    uni.showToast({
                        title: '扫描成功: ' + barcode,
                        icon: 'none'
                    });
                },
                fail: (err) => {
                    // 扫描失败
                    console.error('扫描失败:', err);
                    uni.showToast({
                        title: '扫描失败',
                        icon: 'none'
                    });
                }
            });
        },
        toggle(type) {
            this.$refs.popup.open(type)
        },
        next() {
            const data = {
                "number": this.number,//银行卡号
                "id_card": this.step1Data.idCardNo,//身份证号
                "name": this.name,//姓名
                "bank_id": this.bank_id,//银行id
                "id_card_pic": [this.step1Data.imageUrlZ, this.step1Data.imageUrlF],//证件地址
            }
            if (!this.number || !this.name || !this.bank_id) {
                uni.showToast({
                    icon: 'none',
                    title: '请认证信息',
                })
            } else {
                saveCardInfo(data).then(res => {
                    if (res.status === 0) {
                        uni.showToast({
                            icon: 'none',
                            title: '保存成功',
                        })
                        setTimeout(()=>{
                            this.$common.navTo('/pages/users_purchasing/user_bank/step3');
                        },1000)
                    }
                })
            }
        }
    }
};
</script>
<style lang="scss" scoped>
@mixin flex {
    display: flex;
    flex-direction: row;
}

@mixin height {
    height: 100%;
    flex: 1;
}

.popup-content {
    width: 748rpx;
    background-color: #fff;
    height: 1138rpx;

    .bank-title {
        text-align: center;
        line-height: 88rpx;
        font-size: 32rpx;
    }

    .list {
        position: relative;
        display: flex;
        margin: 40rpx;

        .btn {
            position: absolute;
            right: 30rpx;
            line-height: 40rpx;
            color: #0066FF;
            background-color: #ECF2FF;
            height: 40rpx;
            width: 100rpx;
            font-size: 21rpx;
        }
    }

    image {
        width: 48rpx;
        height: 48rpx;
        margin-right: 20rpx;
        vertical-align: middle;
    }
}

.content {
    width: 100%;
    height: calc(100% - 100rpx);
    overflow-y: auto;
}
</style>

<style lang="scss" scoped>
.container {
    width: 100%;
    height: 100vh;
    // text-align: center;
    padding: 20px;
    background: linear-gradient(to bottom, #E3EAFB 0%, transparent 100%);

    .container {
        min-height: 100%;
        background-color: #F5F7FA;
        display: flex;
        flex-direction: column;
    }

    .header {
        height: 88rpx;
        display: flex;
        align-items: center;
        background-color: #FFFFFF;
        padding: 0 32rpx;
        position: relative;
    }

    .back-icon {
        width: 40rpx;
        height: 40rpx;
    }

    .title {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        font-size: 16px;
        font-weight: 500;
        color: #333333;
    }

    .progress {
        height: 120rpx;
        // background-color: #FFFFFF;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 60rpx;
        position: relative;
    }

    .progress-line {
        width: 680rpx;
        position: absolute;
        top: 20%;
        left: 0rpx;
        right: 100rpx;
        height: 18rpx;
        background-color: #fff;
        z-index: 1;
    }

    .progress-line-active {
        position: absolute;
        top: 20%;
        left: 0rpx;
        right: 100rpx;
        height: 18rpx;
        background-color: #C3D5FE;
        width: 330rpx;
        z-index: 1;
    }

    .progress-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        z-index: 2;
    }

    .progress-dot {
        width: 28rpx;
        height: 28rpx;
        border-radius: 50%;
        background-color: #9EA5B3;
        margin-bottom: 16rpx;

        .progress-dot-min {
            width: 16rpx;
            height: 16rpx;
            border-radius: 50%;
            margin: 6.5rpx auto;
            background-color: #4A5A78;
        }
    }

    .progress-dot.active {
        background-color: #A0BBFC;

        .progress-dot-min {
            width: 16rpx;
            height: 16rpx;
            border-radius: 50%;
            margin: 6.5rpx auto;
            background-color: #0066FF;
        }
    }

    .progress-text {
        font-size: 14px;
        color: #666666;
    }

    .form-container {
        flex: 1;
        background-color: #FFFFFF;
        margin-top: 20rpx;

        // padding: 32rpx;
        .form-container-main {
            padding: 38rpx 64rpx;
        }
    }

    .form-tip {
        background-color: #0066FF;
        color: #FFFFFF;
        padding: 24rpx;
        border-radius: 8rpx 8px 0 0;
        font-size: 28rpx;
        // margin-bottom: 32rpx;
    }

    .form-group {
        margin-bottom: 24rpx;
        position: relative;
    }

    .form-input {
        height: 96rpx;
        border: 2rpx solid #E5E7EB;
        background-color: #F4F7FE;
        border-radius: 8rpx;
        padding: 0 24rpx;
        font-size: 14px;
    }

    .upload-container {
        display: flex;
        justify-content: space-between;
        margin-top: 48rpx;
    }

    .upload-item {
        width: 242rpx;
        height: 150rpx;
        border: 2rpx dashed #E5E7EB;
        border-radius: 8rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        image {
            width: 242rpx;
            height: 150rpx;
        }
    }

    .camera-icon {
        width: 56rpx;
        height: 56rpx;
        margin-bottom: 16rpx;
        position: absolute;
        right: 20rpx;
        top: 20rpx;
    }

    .upload-text {
        font-size: 12px;
        color: #999999;
    }

    .submit-btn {
        width: 563rpx;
        height: 96rpx;
        background-color: #0066FF;
        color: #FFFFFF;
        font-size: 16px;
        margin: 44rpx auto;
        border-radius: 8rpx;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}
</style>